<!--
 * @Author       : ShiJunJie
 * @Date         : 2022-04-01 14:42:26
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-20 10:55:58
 * @FilePath     : /src/layouts/LayoutLR.vue
 * @Descripttion : 
-->
<template>
  <a-layout id="basicLayout">
    <!-- <LayoutHeader /> -->
    <a-layout id="layout-content-view">
      <div class="layout-left">
        <a-button type="primary" @click="loginOut" block>退出登录</a-button>
        <LayoutMenu style="height: 100%" />
      </div>
      <LayoutContent>
        <template #main>
          <a-config-provider :getPopupContainer="getPopupContainer" :locale="locale">
            <RouterView />
          </a-config-provider>
        </template>
      </LayoutContent>
    </a-layout>
  </a-layout>
</template>
<script setup>
import LayoutMenu from './components/Menu/LayoutMenu.vue';
import LayoutHeader from './components/Header/LayoutHeader.vue';
import LayoutContent from './components/Content/LayoutContent.vue';

import { reactive, provide, readonly, onMounted, watch, computed, toRaw } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _throttle } from '@/utils/util';

import storage from 'good-storage';

import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
const locale = zhCN;

const loginOut = () => {
  localStorage.clear();
  window.location.reload();
};

// TODO: 以下所有内容需要更新为 xuex(pinia)
const layoutContentViewStyle = reactive({});
onMounted(() => {
  setTimeout(() => {
    const layoutHeader = document.getElementById('layout-header')?.offsetHeight || 0;
    document.getElementById('layout-content-view').style.height = `calc(100vh - ${layoutHeader}px)`;
  }, 1);

  window.addEventListener(
    'resize',
    _throttle(() => {
      if (MenuClickType.value === false && window.innerWidth < 1366) {
        MenuState.collapsed = true;
        MENU_TABS_STORAGE.set({ collapsed: MenuState.collapsed });
      } else if (MenuClickType.value === false && window.innerWidth > 1366) {
        MenuState.collapsed = false;
        MENU_TABS_STORAGE.set({ collapsed: MenuState.collapsed });
      }
    })
  );
});

const getPopupContainer = (el, dialogContext) => {
  if (dialogContext) {
    return dialogContext.getDialogWrap();
  } else {
    return document.body;
  }
};

const router = useRouter();

const userTokens = storage.get('USER_TOKEN');

const getMenuData = (tree = [], _responce = []) => {
  if (!tree.length) return [];

  tree.forEach((e, i) => {
    if (!e?.meta?.menu) return;

    _responce.push({ ...e /*children: [] */ });

    if (e.children && e.children.length > 0) {
      getMenuData(e.children, _responce.children);
    }
  });

  return _responce;
};
const asyncRouter = storage.get('USER_ROUTERS') || [];
const MenuDataAdmin = reactive(getMenuData([{ id: 0, name: '工作台', path: '/', close: false, icon: 'icon-layers-o', meta: { menu: true } }, ...asyncRouter]));

// 导航菜单数据
const MenuData = MenuDataAdmin;
// console.log('MenuData', MenuData);

const defaultMenuTabsData = {
  tabs: {
    工作台: { id: 0, title: '工作台', path: '/', close: false }
  },
  openKeys: [],
  selectedKeys: [0],
  collapsed: false
};
// 将导航条相关数据进行缓存
const MENU_TABS_STORAGE = {
  set: e => {
    storage.set('MENU_TABS', (MENU_TABS_STORAGE.get() && { ...MENU_TABS_STORAGE.get(), ...e }) || defaultMenuTabsData);
  },
  get: () => {
    return storage.get('MENU_TABS') || defaultMenuTabsData;
  }
};

// 获取并设置导航条导航菜单的初始信息
const menuTabsStorage = MENU_TABS_STORAGE.get();
if (!menuTabsStorage) {
  MENU_TABS_STORAGE.set();
}

// 菜单属性
const MenuState = reactive({
  openKeys: menuTabsStorage.openKeys, // 初始展开
  selectedKeys: menuTabsStorage.selectedKeys, // 初始选中
  collapsed: menuTabsStorage.collapsed
  // rootSubmenuKeys: [],
});
// 菜单整体
const BaseMenuData = {
  data: readonly(MenuData),
  state: MenuState,
  set: e => {
    MenuData.value = e;
  }
};
provide('BaseMenuData', BaseMenuData);

let MenuClickType = ref(false);
const MenuSetCollapsed = () => {
  MenuClickType.value = true;
  MenuState.collapsed = !MenuState.collapsed;
  MENU_TABS_STORAGE.set({ collapsed: MenuState.collapsed });
};

provide('MenuSetCollapsed', MenuSetCollapsed);

// 头部选项卡
const TabsData = reactive({ value: menuTabsStorage.tabs });
const BaseTabsData = {
  data: readonly(TabsData),
  set: e => {
    TabsData.value = menuTabsStorage.tabs;
  },
  add: e => {
    TabsData.value[e.title || e.name] = e;
    const TabsDataVal = toRaw(TabsData.value);
    MENU_TABS_STORAGE.set({ tabs: TabsDataVal });
    // console.log(TabsDataVal)
  },
  del: e => {
    if ((e.title || e.name) !== '工作台') {
      console.log(e.id);
      if (MENU_TABS_STORAGE.get().selectedKeys[0] === e.id) {
        router.push(defaultMenuTabsData.tabs.工作台.path);
      }
      MenuState.selectedKeys = defaultMenuTabsData.selectedKeys;
      delete TabsData.value[e.title || e.name];
      MENU_TABS_STORAGE.set({ tabs: TabsData.value });
    }
  }
};
provide('BaseTabsData', BaseTabsData);

// 含有子集的菜单点击
const MenuClick = arr => {
  // console.log(arr)
  MENU_TABS_STORAGE.set({ openKeys: arr });
};
provide('MenuClick', MenuClick);
// 末尾菜单点击
const MenuItemClick = e => {
  e.path && router.push(e.path);
  console.log(e);
  BaseTabsData.add(e);
  MENU_TABS_STORAGE.set({ selectedKeys: [e.id] });
};
provide('MenuItemClick', MenuItemClick);

// 头部导航条点击
const LayoutTabsClick = e => {
  MENU_TABS_STORAGE.set({ selectedKeys: [e.id] });
  MenuState.selectedKeys = [e.id];
};
provide('LayoutTabsClick', LayoutTabsClick);
</script>

<style lang="scss" scoped>
#basicLayout {
  height: 100%;
}
.layout-left {
  background: #fff;
}
</style>
